<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    //定义一个空的Person
    function Person() {}
    //实例化Person对象
    let p1 = new Person();
    //动态添加属性
    p1.name = "刘德华"
    p1.age = 50;
    //动态添加方法
    p1.run = function () {
        console.log(this.name+":"+this.age);
    }
    //调用对象的方法
    p1.run();
    //定义一个自带属性和方法的对象
    function Car() {
        this.name = "宾利";
        this.price = 500;
        this.run = function (){
            console.log(this.name+"："+this.price);
        }
    }
    let c1 = new Car();
    c1.run();
    //直接实例化空对象方式
    let p2 ={};
    p2.name="貂蝉";
    p2.age=66;
    p2.run = function () {
        console.log(this.name+":"+this.age);
    }
    p2.run();
    //直接实例化带属性和方法的空对象
    //以键值对的形式去做
    let arr=[{name:"吕布",age:50,ss:300},{name:"吕布1",age:50,ss:300}
    ,{name:"吕布2",age:50,ss:300}];
   //获取table
    let table = document.querySelector("table");
    //遍历数组
    for (let item of arr) {
        let  tr= document.createElement("tr");
        let  name1=document.createElement("td");
        let  age1=document.createElement("td");
        let  ss1=document.createElement("td");
        //给td添加显示的内容
        name1.innerText=item.name;
        age1.innerText=item.age;
        ss1.innerText=item.ss;
        tr.append(name1,age1,ss1);
        table.append(tr);
    }
    

</script>
</body>
</html>